<template>
  <view class="button-page-200">
    <mes-form ref="mesFormTopRef" :mesForm="mesFormTop"></mes-form>
    <mes-form
      :mesForm="item"
      v-for="(item, index) in mesFormBottomArr"
      :key="index"
    ></mes-form>
    <mes-button type="3" :form="buttonForm"></mes-button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mesFormTop: {
        row: {
          purchase_code: ''
        },
        items: [
          {
            title: '生产计划', // 是否必要
            required: true,
            slots: {
              // 右侧图标
              icon: 'arrow', // 绑定表单数据中的属性
              field: 'purchase_code', // 组件类型
              type: 'input',
              placeholder: '请选择生产计划',
              disabled: true
            }, // 表单校验规则(不传默认不校验)
            rules: [
              {
                // 是否必要
                type: 'required',
                message: '请选择生产计划'
              }
            ],
            // 点击form-item
            tap: () => {
              uni.navigateTo({
                url: `/pages/home/mrp/select?purchase_code=${this.mesFormTop.row.purchase_code}`
              })
            }
          }
        ]
      },
      mesFormBottomArr: [
        // {
        //   top: 20,
        //   row: {
        //     goods_code: '',
        //     goods_name: '',
        //     unit_name: '',
        //     purchase: '',
        //     number: ''
        //   },
        //   items: [
        //     {
        //       title: '商品编号', // 是否必要
        //       slots: {
        //         field: 'goods_code'
        //       }
        //     },
        //     {
        //       title: '商品名称', // 是否必要
        //       slots: {
        //         field: 'goods_name'
        //       }
        //     },
        //     {
        //       title: '单位', // 是否必要
        //       slots: {
        //         field: 'unit_name'
        //       }
        //     },
        //     {
        //       title: '成本', // 是否必要
        //       slots: {
        //         field: 'purchase'
        //       }
        //     },
        //     {
        //       title: '数量', // 是否必要
        //       slots: {
        //         field: 'number'
        //       }
        //     }
        //   ]
        // }
      ],
      buttonForm: {
        leftText: '重置',
        rightText: '确定',
        leftEvent: () => {
          this.reset()
        },
        rightEvent: () => {
          this.save()
        }
      }
    }
  },
  onShow() {
    if (this.mesFormTop.row.id) {
      this.getGoods(this.mesFormTop.row.id)
    }
  },
  methods: {
    // 点击确定
    save() {
      this.$refs.mesFormTopRef.validate(async (valid) => {
        if (!valid) return
        let postForm = {
          purchase_code: this.mesFormTop.row.purchase_code,
          info_id: this.mesFormTop.row.id
        }
        let res = await this.$api.prod.mrps.add(postForm)
        if (res.code == 200) {
          this.$tools.successBack(res.msg)
        }
      })
    },
    async getGoods() {
      let res = await this.$api.prod.plan.getdetail({
        id: this.mesFormTop.row.id
      })
      if (res.code == 200) {
        console.log('row 详情', res)
        this.mesFormBottomArr = []
        res.data.info_list.forEach((item) => {
          this.mesFormBottomArr.push({
            top: 20,
            row: item,
            items: [
              {
                title: '商品编号', // 是否必要
                slots: {
                  field: 'goods_code'
                }
              },
              {
                title: '商品名称', // 是否必要
                slots: {
                  field: 'goods_name'
                }
              },
              {
                title: '单位', // 是否必要
                slots: {
                  field: 'unit_name'
                }
              },
              {
                title: '成本', // 是否必要
                slots: {
                  field: 'purchase'
                }
              },
              {
                title: '数量', // 是否必要
                slots: {
                  field: 'number'
                }
              }
            ]
          })
        })
      }
    },
    // 点击重置
    reset() {
      this.mesFormBottomArr = [
        // {
        //   top: 20,
        //   row: {
        //     goods_code: '',
        //     goods_name: '',
        //     unit_name: '',
        //     purchase: '',
        //     number: ''
        //   },
        //   items: [
        //     {
        //       title: '商品编号', // 是否必要
        //       slots: {
        //         field: 'goods_code'
        //       }
        //     },
        //     {
        //       title: '商品名称', // 是否必要
        //       slots: {
        //         field: 'goods_name'
        //       }
        //     },
        //     {
        //       title: '单位', // 是否必要
        //       slots: {
        //         field: 'unit_name'
        //       }
        //     },
        //     {
        //       title: '成本', // 是否必要
        //       slots: {
        //         field: 'purchase'
        //       }
        //     },
        //     {
        //       title: '数量', // 是否必要
        //       slots: {
        //         field: 'number'
        //       }
        //     }
        //   ]
        // }
      ]
      this.mesFormTop.row = { purchase_code: '' }
    }
  }
}
</script>

<style lang="less" scoped>
.page {
  padding-bottom: 92rpx;
}
</style>
